<template>
  <header class="header">
    <div class="header-top">
      <div class="container header-top__flex">
        <span class="welcome">欢迎来到{{ getSiteInfo.title }}</span>
        <div class="item text" @click="handleCommand('/my/study/basic')">
          <i class="edu-icon--left edu-icon-xuexizhongxin"></i>
          <span>学习中心</span>
        </div>
        <div class="item text" @click="handleCommand('/buy/cart')">
          <i class="edu-icon--left edu-icon-gouwuche1"></i>
          <span class="text">购物车</span>
        </div>
        <div class="item text" @click="goConsult">
          <i class="edu-icon--left edu-icon-kefuzhongxin"></i>
          <span>客服中心</span>
        </div>
        <div class="item text" @click="handleCommand('/my/notify/system_notify')">
          <span class="red-dot" v-show="globNotifyUnread == 1"></span>
          <i class="icon edu-icon-xiaoxizhongxin"></i>
        </div>
        <div class="item text" @click="handleCommand('/my/study/record')">
          <i class="icon edu-icon-xuexijilu"></i>
        </div>
        <div v-if="isLogin" class="item">
          <el-popover
            trigger="hover"
            placement="bottom"
            :visible-arrow="false"
            popper-class="page-header-popper"
            v-model="visible"
          >
            <div
              v-for="item in popperList"
              :key="item.key"
              :class="{ divided: item.key == 'logout' }"
              class="page-header-popper__item"
              @click="handleCommand(item.url, item.key)"
            >
              {{ item.title }}
            </div>
            <div slot="reference" class="item-user" @click="handleCommand('/my/study/basic')">
              <el-avatar
                :size="24"
                :src="accountInfo.avatar_url"
                class="edu-icon--left"
                @error="$util.isUndef(accountInfo.avatar_url)"
              >
                <img src="@/assets/images/public/avatar.png" />
              </el-avatar>
              <span class="text name">{{ accountInfo.nick_name }}</span>
            </div>
          </el-popover>
        </div>
        <div v-else class="item item-user">
          <span class="text" @click="goPopup(loginRouteName)">登录</span>
          <span class="line"></span>
          <span class="text" @click="goPopup('login_register')">注册</span>
        </div>

        <!-- <div
          v-if="projectconfigData.saas && getGlobalSchoolId == 1"
          class="item text"
          @click="handleCommand('/school/auth')"
        >
          <span>机构入驻</span>
        </div> -->
      </div>
    </div>
    <div class="header-body">
      <div class="container header-body__flex">
        <!-- logo -->
        <div class="header-body__logo">
          <router-link to="/">
            <el-image :src="getSiteInfo.pc_logo_url || ''" fit="cover"></el-image>
          </router-link>
          <dropdown v-if="routeName == 'homepage' && categoryPosition == 2" />
        </div>
        <!-- 导航 -->
        <navbar></navbar>
        <!-- 搜索框 -->
        <div class="header-body__search">
          <el-input
            placeholder="请输入内容"
            v-model="searchInput"
            @keypress.native.enter="handleSearchInit"
          >
            <el-select v-model="searchSelect" slot="prepend" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in searchOption"
                :key="item.value"
              ></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="handleSearchInit"></el-button>
          </el-input>
        </div>
      </div>
    </div>
  </header>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import navbar from './components/navbar'
import dropdown from './components/dropdown'
export default {
  components: {
    navbar,
    dropdown
  },
  computed: {
    ...mapState({
      projectconfigData: state => state.projectSetting.projectconfigData,
      globNotifyUnread: state => state.projectSetting.globNotifyUnread
    }),
    ...mapGetters({
      loginRouteName: 'projectSetting/getGlobLoginRouteName',
      getSiteInfo: 'projectSetting/getGlobSiteInfo',
      accountInfo: 'user/accountInfo',
      isLogin: 'user/isLogin',
      categoryPosition: 'projectSetting/getGlobCategoryPositionSwitch'
    }),
    routeName() {
      return this.$route.name
    }
  },
  data() {
    return {
      visible: false,
      popperList: [
        {
          title: '我的课程',
          key: 'course',
          url: '/my/study/course'
        },
        {
          title: '我的订单',
          key: 'order',
          url: '/my/finance/my_order'
        },
        {
          title: '我的消息',
          key: 'notify',
          url: '/my/notify/system_notify'
        },
        {
          title: '资料设置',
          key: 'profile',
          url: '/my/profile/my_profile'
        },
        {
          title: '退出',
          key: 'logout',
          url: ''
        }
      ],
      searchInput: '',
      searchSelect: 1,
      searchOption: [
        {
          label: '课程',
          value: 1
        },
        {
          label: '商城',
          value: 2
        }
      ]
    }
  },
  methods: {
    // 登录
    goPopup(key) {
      this.$popup({
        currentTab: key,
        visible: true
      })
    },
    // 跳转
    handleCommand(path, key) {
      this.visible = false
      if (path == '' && key == 'logout') {
        this.$store.dispatch('user/logout', true)
      } else {
        this.$router.push({
          path: path
        })
      }
    },
    // 客服
    goConsult() {
      let consult = this.getSiteInfo.online_consult
      let url = consult
      if (this.$util.digits(consult)) {
        url = 'http://wpa.qq.com/msgrd?v=1&uin=' + consult + '&site=qq&menu=yes'
      }
      if (!this.$util.isEmpty(url)) {
        window.open(url)
      }
    },
    // 搜索
    handleSearchInit() {
      if (this.searchSelect == 1) {
        this.$router.push({
          path: '/course',
          query: {
            title: this.searchInput
          }
        })
      } else if (this.searchSelect == 2) {
        this.$store.commit('search/SET_PALY_KEY', this.searchInput)
        if (this.$route.name != 'mall') {
          this.$router.push({
            path: '/mall'
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  &-top {
    background: #f5f5f5;
    &__flex {
      height: 35px;
      display: flex;
      align-items: center;
      position: relative;
      .welcome {
        flex: 1;
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
      }
      .text {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
      }
      .item {
        cursor: pointer;
        position: relative;
      }
      .item + .item {
        margin-left: 30px;
      }
      .item-user {
        display: flex;
        align-items: center;
        .name {
          max-width: 60px;
          line-height: 1;
          @include ellipsis();
        }
      }
      .line {
        width: 1px;
        height: 10px;
        background: #dcdfe6;
        margin: 0 4px;
      }
      .red-dot {
        position: absolute;
        right: -4px;
        top: -4px;
        width: 6px;
        height: 6px;
        background: $text-color-price;
        border-radius: 100%;
      }
    }
  }
  &-body {
    background: #ffffff;
    &__flex {
      display: flex;
      min-height: 70px;
    }
    &__logo {
      flex: 0 0 270px;
      position: relative;
      .router-link-active {
        text-decoration: none;
      }
      .el-image {
        display: inline-block;
        max-width: 270px;
        margin-top: 15px;
      }
      &:hover .home-module__dropdown {
        display: block;
      }
    }
    &__search {
      display: flex;
      align-items: center;
      ::v-deep .el-input-group {
        width: 250px;
        display: flex;
        align-items: center;
        background: #f7f7f7;
        border-radius: 4px;
        .el-input-group__prepend {
          width: 20px;
          border: none;
          font-size: 14px;
          color: #333333;
          background-color: transparent;
          .el-input--suffix .el-input__inner {
            padding-right: 14px;
            padding-left: 12px;
          }
          .el-input__icon {
            width: 14px;
          }
          .el-input__suffix {
            right: 0;
          }
        }
        .el-input__inner {
          flex: 1;
          border: none;
          padding: 0 0 0 8px;
          background-color: transparent;
        }
        .el-input-group__append {
          border: none;
          width: auto;
          padding: 0;
          background-color: transparent;
          font-size: 20px;
          @include edu-color-primary;
          .el-button {
            padding: 0;
            margin: 0;
            width: 40px;
            height: 40px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.page-header-popper[x-placement^='bottom'] {
  margin-top: 8px !important;
}
.page-header-popper {
  min-width: 110px !important;
  padding: 0 !important;
  border: none !important;

  &__item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: $text-color-secondary;
    cursor: pointer;
    &.divided {
      border-top: 1px solid #ebeef5;
    }
    &:hover {
      background: #f7f7f7;
    }
  }
}
</style>
